/**
 * @Description:分栏子项
 * @Author:zqy
 * @Date:2022-08-19 11:14:15
 * @Last Modified by: zqy
 * @Last Modified time: 2022-11-17 09:09:04
*/
import './style.scss'
import { getDictByType } from '../DictSelectPicker/apis'
const none = [undefined, null, '']
export default {
  name: 'QupListItem',
  props: {
    label: {
      type: [String, Number],
      default: ''
    },
    value: {
      type: [String, Number, Array],
      default: ''
    },
    sep: {
      type: [String],
      default: ''
    },
    itemClassName: {
      type: [String],
      default: ''
    },
    labelClassName: {
      type: String,
      default: ''
    },
    labelWidth: {
      type: [String,Number],
      default: ''
    },
    labelPosition: {
      type: String,
      default: '' // left,right,justify
    },
    valueClassName: {
      type: String,
      default: ''
    },
    defaultValue: {
      type: String,
      default: ''
    },
    propEnum: {
      // 数据字典配置{domainCode,appCode}
      type: Object,
      default: () => ({
        appCode:'',
        domainCode:''
      })
    },
    dictTypeCode: {
      //数据字典类型编码
      type: String,
      default: ''
    },
    ellipsis:{
      type:Boolean,
      default:false
    },
    showOverflowTooltip:{
      type:Boolean,
      default:false
    }//当内容过长被隐藏时显示 tooltip
  },
  data() {
    return {
      __value: ''
    }
  },
  watch: {
    value: {
      handler: function(n, o) {
        if (none.includes(n)) return ''
        const {appCode='',domainCode=''} = this.propEnum
        if (none.includes(this.dictTypeCode) || none.includes(appCode) || none.includes(domainCode) ) return n
        if (!(n instanceof Array)) {
          n = `${n}`.split(',')
        }
        const t = []
        const params = { dictTypeCode: this.dictTypeCode, appCode, domainCode }
        getDictByType(params).then(res => {
          for (const code of n) {
            if(!none.includes(code)){
              for (const item of res.data) {
                if (item.dictCode.toString() === code.toString()) {
                  t.push(item.dictName)
                  continue
                }
              }
            }
          }
          this.$set(this.$data, '__value', t.join(','))
        })
      },
      immediate: true
    }
  },
  render(h) {
    // 如果content slot有内容则只渲染content
    if (this.$scopedSlots.content instanceof Function) {
      return this.$scopedSlots.content()
    }
    const items = []
    if (this.label !== '') {
      const labelStyle = {
        position: 'relative',
        paddingRight: '4px',
        width:isNaN(this.labelWidth)?this.labelWidth : this.labelWidth+ 'px'
      }
      if(['left','right','justify'].includes(this.labelPosition)){
        labelStyle.textAlign = this.labelPosition
      }
      if(this.labelPosition==='justify'){
        labelStyle.textAlignLast = 'justify'
      }
      
      items.push(h('div', { class: [this.labelClassName], style: labelStyle}, [this.label, h('span', {
        style: {
          // position: 'absolute',
          // right: '-3px'
        }
      }, this.sep)]))
    }
    let elCls= (this.ellipsis==='false' || this.ellipsis===false )? []:['ellipsis']
    if (typeof this.$scopedSlots.default === 'function') {
      const w_vnode = h('div', { class: [...elCls,...['slotItemContainer']], style: { width: '100%', display: 'inline-block' }}, this.$scopedSlots.default(this.value))
      items.push(h('div', { class: ['item-content']},[w_vnode]))
    } else if (typeof this.$scopedSlots.icon === 'function') {
      const v_vnode = h('span', { class: [this.valueClassName], onicon: { click: () => { this.value !== undefined ? this.$emit('click', this.value) : '' } }}, this.$data.__value ? this.$data.__value : (!(none.includes(this.value)) ? this.value : this.defaultValue))
      const w_vnode = h('div', { class:  [...elCls,...['slotItemContainer']], style: { width: '100%', display: 'inline-block' }}, [v_vnode, ...this.$scopedSlots.icon()])
      items.push(h('div', { class: ['item-content']},[w_vnode]))
    } else {
      const conValue = this.$data.__value ? this.$data.__value : (!(none.includes(this.value)) ? this.value : this.defaultValue)
      let childNode = conValue
      if(!!this.showOverflowTooltip && conValue !==this.defaultValue){
        elCls=['ellipsis']
        childNode = [
          h('el-tooltip',{
            props:{
              effect:'dark',
              placement:'top',
              content:conValue
            }
          },[h('span',conValue)])
        ]
      }

      const w_vnode =h('div', { 
            class: [...elCls,...[this.valueClassName]], 
            on: { click: () => { this.value !== undefined ? this.$emit('click', this.value) : '' } }
          },  childNode)
      
      items.push(h('div', { class: ['item-content']},[w_vnode]))
    }
      
    return h('div', {
      class: [this.itemClassName, 'custom-list-item']
    }, items)
  }
}
